<template>
	<div>
		<!-- 搜索框 -->
		<div style="padding: 10px 0; border: rgb(47,144,185,0.2) solid 1px; box-shadow: 1px 1px 3px #ccc;">
			<el-input style=" width: 150px; margin-left: 10px;" placeholder="用户名搜索" prefix-icon="el-icon-s-custom" v-model="nickname">
			</el-input>
			<el-input style=" width: 150px;" class="ml-5" placeholder="账号搜索" prefix-icon="el-icon-search"
				v-model="number"></el-input>
			<el-input style=" width: 150px;" class="ml-5" placeholder="手机号搜索" prefix-icon="el-icon-phone-outline"
				v-model="phone"></el-input>
			<el-input style=" width: 150px;" class="ml-5" placeholder="地址搜索" prefix-icon="el-icon-office-building"
				v-model="address"></el-input>
			<el-button round style="margin-left: 20px;" type="success" @click="load">搜索</el-button>
			<el-button round class="ml-5" type="warning" @click="reset">重置</el-button>
			<el-button type="primary" round @click="handleAdd">添加用户</el-button>
			<el-button type="danger" round @click="delBetch" v-if="urole === 'ROLE_SUPERADMIN'">批量删除</el-button>
		</div>

		<!--  表格   -->
		<el-table :data="tableData" border style="width: 100%; margin: 10px 0 0 0" :header-cell-class-name="'headerBg'"
			@selection-change="handleSelectionChange" tooltip-effect="dark">
			<!-- 多选框 -->
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="id" label="ID" width="60"></el-table-column>
			<el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
			<el-table-column prop="number" label="账号" width="120"></el-table-column>
			<el-table-column prop="phone" label="电话" width="120"></el-table-column>
			<el-table-column prop="address" label="地址" width="200"></el-table-column>
			<el-table-column prop="role" label="用户角色" width="120"></el-table-column>
			<el-table-column prop="icon" label="头像" width="150" align="center">
				<template slot-scope="scope">
					<img style="vertical-align:middle; width: 80px; height: 50px;" :src="scope.row.icon">
				</template>
			</el-table-column>

			<!-- 编辑与删除按键 -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="success" icon="el-icon-edit" circle @click="handleEdit(scope.row)">
					</el-button>
					<el-popconfirm style="margin-left: 15px;" confirm-button-text='确定' cancel-button-text='再想想'
						icon="el-icon-info" icon-color="red" title="确定删除此用户" @confirm="handleDelete(scope.row)">
						<el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页表 -->
		<div style="padding: 10px 0; text-align: center;">
			<el-pagination :page-sizes="[6, 12, 18, 24]" :page-size="pageSize" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<!-- 嵌套表单 新增用户信息 -->
		<el-dialog title="添加用户信息" :visible.sync="dialogFormVisible" width="35%" style="text-align: center;">
			<el-form label-width="100px">
				<div style="text-align: center; margin: 10px 0;">
					<el-upload class="avatar-uploader" action="/user/upload" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="form.icon" :src="form.icon" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<el-form-item label="用户名">
					<el-input v-model="form.nickname" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="账号">
					<el-input v-model="form.number" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="用户角色">
					<el-select v-model="form.role" placeholder="请选择用户角色" style="width: 75%;">
						<el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="form.phone" autocomplete="off" maxlength="11" minlength="8"
						style="width: 75%;">
					</el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 嵌套表单 编辑用户信息 -->
		<el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible1" width="35%" style="text-align: center;">
			<el-form label-width="100px">
				<div style="text-align: center; margin: 10px 0;">
					<el-upload class="avatar-uploader" action="/user/upload" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="form.icon" :src="form.icon" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
				<el-form-item label="用户名">
					<el-input v-model="form.nickname" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="账号">
					<el-input v-model="form.number" autocomplete="off" disabled style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="用户角色">
					<el-select v-model="form.role" placeholder="请选择用户角色" style="width: 75%;">
						<el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="form.phone" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address" autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="edit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "User",
		data() {
			return {
				// 多选框
				multipleSelection: [],
				tableData: [],
				// 分页查询数据
				pageSize: 6,
				pageNum: 1,
				total: 0,
				// 搜索框数据
				number: '',
				phone: '',
				address: '',
				nickname: '',
				// 隐藏表单是否显示
				dialogFormVisible: false,
				dialogFormVisible1: false,
				// 表单数据
				form: {},
				// 获取角色信息
				roles: [],
				// 用户信息
				urole: '',
				uname: ''
			}
		},
		methods: {
			// 勾选用户 && 重置输入框
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			reset() {
				this.nickname = '',
					this.number = '',
					this.phone = '',
					this.address = '',
					this.load()
			},

			//批量删除弹窗   &&    批量删除用户信息
			delBetch() {
				if (this.multipleSelection != '') {
					this.$confirm('此操作将永久删除这些用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						center: true
					}).then(() => {
						this.delChose()
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.$message.error("未选择需要删除用户!");
				}
			},
			delChose() {
				let ids = this.multipleSelection.map(v => v.id) // 将对象数组变为ID数组
				this.request.post("/user/del/batch", ids).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.success(res.message)
					}
				})
			},
			// 删除信息
			handleDelete(row) {
				if (row.role === 'ROLE_SUPERADMIN') {
					this.$message.error("权限不足，超级管理员不能被删除！！")
				} else {
					this.request.delete("/user/" + row.id).then(res => {
						if (res.code != 500) {
							this.$message.success(res.message)
							this.load()
						} else {
							this.$message.error(res.message)
						}
					})
				}
			},



			// 新增用户表框显示  &&  保存用户信息
			handleAdd() {
				// 获取角色信息
				this.request.get("/role").then(res => {
					this.roles = res.obj
				})
				this.dialogFormVisible = true
				this.form = {
					icon: ""
				}
			},
			save() {
				this.request.post("/user", this.form).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible = false
						this.$message.success(res.message)
						this.load()
					} else {
						this.dialogFormVisible = false
						this.$message.error(res.message)
					}
				})
			},


			// 编辑用户信息   &&   打开编辑框
			edit() {
				this.request.put("/user", this.form).then(res => {
					if (res.code != 500) {
						this.dialogFormVisible1 = false
						this.$message.success(res.message)
						this.load()
					} else {
						this.dialogFormVisible1 = false
						this.$message.error(res.message)
					}
				})
			},
			handleEdit(row) {
				if (row.role === 'ROLE_SUPERADMIN') {
					this.$message.error("权限不足，超级管理员信息不能被修改！！")
				} else {
					this.form = JSON.parse(JSON.stringify(row))
					// 获取角色信息
					this.request.get("/role").then(res => {
						this.roles = res.obj
					})
					this.dialogFormVisible1 = true
				}
			},


			// 封装分页查询请求 请求页面和请求页码
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.load()
			},
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum
				this.load()
			},
			load() {
				this.request.get('/user/page', {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						nickname: this.nickname,
						number: this.number,
						phone: this.phone,
						address: this.address
					}
				}).then(res => {
					this.tableData = res.obj.records
					this.total = res.obj.total
				})
			},

			// 用户头像上传
			handleAvatarSuccess(res) {
				this.form.icon = res.obj
			},

			// 获取用户信息
			getUser() {
				let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : ""
				this.unumber = username.number;
				this.urole = username.role;
			},
		},

		created() {
			// 请求分页查询
			this.load();
			this.getUser();
		}
	}
</script>

<style>
	.headerBg {
		background: #a4cab6 !important;
		color: #000;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
